<!--
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->

<div class="admin__field"
     visible="visible"
     disable="disabled"
     css="element.setClasses(element)"
     attr="'data-index': index">
    <label if="element.label" class="admin__field-label" attr="for: element.uid">
        <span translate="element.label"/>
    </label>

    <div class="admin__field-control" data-role="grid-wrapper">
        <div class="admin__control-table-pagination" visible="!!element.getRecordCount()">
            <div class="admin__data-grid-pager">
                <button class="action-previous" type="button" data-bind="attr: {title: $t('Previous Page')}, click: previousPage, disable: isFirst()"></button>
                <input class="admin__control-text" type="number" data-bind="attr: {id: ++ko.uid}, value: currentPage">
                <label class="admin__control-support-text" data-bind="attr: {for: ko.uid}, text: 'of ' + pages()"></label>
                <button class="action-next" type="button" data-bind="attr: {title: $t('Next Page')}, click: nextPage, disable: isLast()"></button>
            </div>
        </div>

        <div class="admin__control-table-wrapper">
            <div data-role="spinner"
                 class="admin__data-grid-loading-mask"
                 if="$data.showSpinner">
                <div class="spinner">
                    <span repeat="8"/>
                </div>
            </div>
            <table class="admin__dynamic-rows data-grid" data-role="grid">
                <thead if="element.columnsHeader">
                <tr>
                    <th if="dndConfig.enabled"
                        class="data-grid-draggable-row-cell"/>

                    <th repeat="foreach: labels, item: '$label'"
                        class="data-grid-th"
                        visible="$label().visible"
                        disable="$label().disabled"
                        css="$label().columnsHeaderClasses">
                        <span translate="$label().label"/>
                    </th>
                </tr>
                </thead>

                <tbody>
                <tr repeat="foreach: elems, item: '$record'"
                    class="data-row"
                    css="'_odd-row': $index % 2">
                    <td if="dndConfig.enabled"
                        class="data-grid-draggable-row-cell"
                        template="name: dndConfig.template, data: dnd"/>

                    <!-- ko foreach: { data: $record().elems(), as: 'elem'}  -->
                    <td if="elem.template"
                        visible="elem.visible"
                        disable="elem.disabled"
                        css="$parent.setClasses(elem)"
                        template="elem.template"
                        attr="'data-index': index"/>
                    <!-- /ko -->
                </tr>
                </tbody>
            </table>
        </div>

        <div class="admin__control-table-action" if="element.addButton">
            <button attr="{disabled: disabled}"
                    type="button"
                    click="addChild.bind($data, false, false)">
                <span translate="addButtonLabel"/>
            </button>
        </div>
        <render args="fallbackResetTpl" if="$data.showFallbackReset && $data.isDifferedFromDefault"/>
    </div>
</div>
